<!--
 * @Description:
 * @Version: 2.0
 * @Autor: LMJ
 * @Date: 2021-09-07 15:05:21
 * @LastEditors: LMJ
 * @LastEditTime: 2021-09-17 13:15:52
-->
<template>

  <div style="width: 96%; height: 90%;padding-left: 10px;">
    <div id="bottomLeft"></div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      charts:null,
    };
  },
  created() {},
  mounted() {
    this.init();
    //根据浏览器宽度变化改变可视化报表图宽高
    window.addEventListener("resize", () => {
      this.charts.resize();
    });
  },
  beforeDestroy() {
    if (!this.charts) {
      return
    }
    /* 释放图表实例 */
    this.charts.dispose()
    /* dispose 会释放内部占用的一些资源和事件绑定，但是解除实例的引用我们是做不到的，所以需要重新赋值为null */
    this.charts = null
  },

  methods: {
    //调用
    mounted(){
      this.$nextTick(function() {
        this.init();
      })
    },
    init() {
      this.charts = echarts.init(this.$el);
      this.charts.setOption({
        title: {
          // text: '单位：件',
          // left: "left",
          // // textStyle: {
          // //   color: "#cdddf7",
          // //   fontSize: "18px",
          // // },
          subtext: '单位：件',
          subtextStyle:{
            color: "#cdddf7",
          },
        },
        tooltip: {
          trigger: 'axis'
        },
        // legend: {
        //   data: ['入库量'],
        //   textStyle:{
        //     color: "#cdddf7",
        //   },
        // },

        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },

          }
        },
        calculable: true,
        grid:{
          bottom:'15%',
        },
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '入库量',
            type: 'bar',
            data: [
              20.0, 49, 70, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 64, 33
            ],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="scss">
</style>
